<template>
    <div class="Bargaining">
        <div>
            <div class="Bargaining_people">
                <p @click="allcut">全民砍价></p>
            </div>
            <ul class="Bargaining_ul">
                <li
                    v-for="(item, index) in list"
                    :key="index"
                    v-show="index >= 3 && index <= 5"
                    @click="allcut"
                >
                    <img :src="item.pic" alt="" />
                    <div class="Bargaining_div">
                        <p>{{ item.name }}</p>
                        <p class="Bargaining_li_p">{{ item.characteristic }}</p>
                        <div class="Bargaining_div1">
                            <div class="Bargaining_div2">
                                <p>{{ item.kanjiaPrice }}</p>
                                <p>{{ item.numberSells }}</p>
                                <p>{{ item.minBuyNumber }}件</p>
                            </div>
                            <div class="Bargaining_div3">
                                <p>低价</p>
                                <p>原价</p>
                                <p>限量</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { kanjia } from "../../../utils/api";
export default {
    data() {
        return {
            list: [],
        };
    },
    mounted() {
        kanjia().then((res) => {
            // console.log(res);
            this.list = Object.values(res.goodsMap);
        });
    },
    methods: {
        allcut() {
            this.$router.push({ path: "/allcut" });
        },
    },
};
</script>

<style lang="scss" scoped>
.Bargaining_people {
    width: 100%;
    height: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.36rem;
    border-bottom: 0.01rem solid #e9e9e9;
}
.Bargaining_ul {
    width: 100%;
    // height: 150px;
    li {
        width: 100%;
        // height: 100%;
        margin-top: 0.2rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 0.3rem;
        img {
            width: 30%;
            // height: 100%;
        }
        .Bargaining_div {
            width: 60%;
            // height: 100%;
            text-align: center;
            // background: paleturquoise;
            p {
                margin-top: 0.2rem;
            }
            .Bargaining_li_p {
                font-size: 0.24rem;
                color: gray;
            }
            .Bargaining_div1 {
                width: 100%;
                // height: 50%;
                // background: pink;
                margin-top: 0.2rem;
                .Bargaining_div2 {
                    width: 100%;
                    // height: 50%;
                    // background: plum;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                }
                .Bargaining_div3 {
                    width: 100%;
                    // height: 50%;
                    // background: plum;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                }
            }
        }
    }
}
</style>
